<template>
	<view>
		<view class="head">
			<view class="aside_left">
				<image src="../../static/bizhan/detile1.png" mode="aspectFill" class="detile1"></image>
				<view class="coin">{{name}}/USDT</view>
				<!-- <image src="../../static/bizhan/b_down_arr.png" mode="aspectFill" class="b_down_arr"></image> -->
			</view>
			<view class="aside_right">
				<view class="set_green">${{EntrusInfo.biCoin.exchange | toTwo(2)}}</view>
				<!-- <view class="set_gray">¥31.4</view> -->
			</view>
		</view>
		<view class="sellOrbuy_box">
			<view class="aside_left1">
				<view class="change_btn">
					<view class="buy_btn btn" :class="colorIndex==0 ? 'buy_color' : '' " @tap="colorChange">买入</view>
					<view class="sell_btn btn" :class="colorIndex==1 ? 'sell_color' : '' " @tap="colorChange">卖出</view>
				</view>
				<view class="f28 c333 set_margin">
					限价{{colorIndex==0?'买入':'卖出'}}
					<!-- <image src="../../static/bizhan/down_arr.png" mode="aspectFill" class="down_arr"></image> -->
				</view>
				<view class="flexs4 jiajian">
					<view class="flexs jia" @click="jian"><image src="../../static/bizhan/reduce.png" mode="aspectFill" class="reduce_sign"></image></view>
					<input class="flexs jiajiana" v-model="nums"></input>
					<view class="flexs jia" @click="jia"><image src="../../static/bizhan/add.png" mode="aspectFill" class="add_sign"></image></view>
				</view>
				<view class="about_nub">
					数量
				</view>
				<view class="flexs4 jiajian">
					<view class="flexs jia" @click="jian1"><image src="../../static/bizhan/reduce.png" mode="aspectFill" class="reduce_sign"></image></view>
					<input class="flexs jiajiana" v-model="number"></input>
					<view class="flexs jia" @click="jia1"><image src="../../static/bizhan/add.png" mode="aspectFill" class="add_sign"></image></view>
				</view>
				<view class="choose_percentage">
					<!-- <view class="percentage " :class="itemIndex==0 ? 'active' : '' " @click="perSelet(0)">25%</view>
					<view class="percentage"  :class="itemIndex==1 ? 'active' : '' " @click="perSelet(1)">50%</view>
					<view class="percentage"  :class="itemIndex==2 ? 'active' : '' " @click="perSelet(2)">75%</view>
					<view class="percentage"  :class="itemIndex==3 ? 'active' : '' " @click="perSelet(3)">100%</view> -->
				</view>
				<view class="append_nub">
					<view class="f24 c999 set_flex">
						{{colorIndex==0?'买入':'卖出'}}金额
						<view class="buy_number">{{(nums*number) | toTwo(2)}} {{colorIndex==1?name:'USDT'}}</view>
					</view>
					<image src="../../static/bizhan/exchang.png" mode="aspectFill" class="exchange" @tap="colorChange"></image>
				</view>
				<view :class="sell_box" class="common_box" @tap="showPay=true">{{colorIndex==0?'买入':'卖出'}}{{name}}</view>
			</view>
			<view class="aside_right1">
				<view class="price_box">
					<view class="title f22 c999">价格(USDT)</view>
					<view class="price_red_box">
						<view class="price_red" v-for="(val, index) in EntrusInfo.list2">{{ val.price  | toTwo(2)}}</view>
					</view>
					<view class="price_green" v-for="(val, index) in EntrusInfo.list1">{{ val.price | toTwo(2) }}</view>
				</view>
				<view class="mumber_box">
					<view class="title f22 c999">数量({{name}})</view>
					<view class="price_red_box">
						<view class="mumber" v-for="(val, index) in EntrusInfo.list2">{{ val.sum }}</view>
					</view>
					<view class="mumber" v-for="(val, index) in EntrusInfo.list1">{{ val.sum }}</view>
				</view>
			</view>
		</view>
		<view class="entrust_box">
			<view class="entrust">当前委托</view>
			<view class="trade_record" @tap="$open('ore_trade_record?name='+name)">
				<image src="../../static/bizhan/record.png" mode="aspectFill" class="record"></image>
				交易记录
			</view>
		</view>
		<view class="record_box" v-for="(item,index) in EntrusInfo.my" v-if="EntrusInfo.my">
			<view class="aside_top">
				<view class="left_content">
					<view :class="item.type==1?'buy_tab':'sell_tab'">{{item.type==1?'买':'卖'}}</view>
					<view class="coin_name">
						<text class="blod">{{name}}</text>
						<text class="f32 c333 shu">/</text>
						<text class="f28 c333">USDT</text>
					</view>
					<view class="time f24 c999">{{item.createTime | time}}</view>
				</view>
				<view class="cancel_btn f24" @tap="id=item.id;money=item.exchange">撤单</view>
			</view>
			<view class="aside_bot f24">
				<view class="entrust_number">
					<view class="c666 m_right">委托总量</view>
					<view class="c333">{{item.totalNum}}</view>
				</view>
				<view class="entrust_price">
					<view class="c666 m_right">委托价格</view>
					<view class="c333">{{item.exchange}}</view>
				</view>
			</view>
			<view class="aside_bot f24">
				<view class="entrust_number">
					<view class="c666 m_right">成交数量</view>
					<view class="c333">{{item.dealNum}}</view>
				</view>
				<view class="entrust_price">
					<view class="c666 m_right">订单编号</view>
					<view class="c333">{{item.orderno}}</view>
				</view>
			</view>
		</view>
		<view class="have_no" v-if="EntrusInfo.my.length==0">
			本币对暂无委托
		</view>
		<alert :alertTitle="'请输入支付密码'" :showInput="true" v-if="showPay||id" @alertConfirm='alertConfirm'></alert>
	</view>
</template>

<script>
	import md5 from '@/common/md5.min.js'
	import alert from '@/components/alert/alert.vue'
export default {
	data() {
		return {
			nums:1,
			number:1,
			itemIndex:'',
			colorIndex:'',
			sell_box:'',
			name:'',
			showPay:false,
			EntrusInfo:'',
			id:'',
			money:''
		};
	},
	components:{alert},
	onLoad(e) {
		this.name=e.name
		this.colorIndex=e.type || 0
	},
	onShow() {
		this.getEntrusInfo()
	},
	onPullDownRefresh() {
		this.getEntrusInfo()
	},
	methods: {
		alertConfirm(type,payPassword){
			if(this.nums<=0){
				this.$sToast('划转金额错误')
				this.showPay=false
				return
			}
			if(type==1){
				if(this.id){
					// 撤单
					this.cancleEntrust(payPassword)
				}else{
					// 买卖
					this.createEntrust(payPassword)
				}
				
			}
			this.showPay=false
		},
		// 买入卖出
		createEntrust(payPassword){
			let time=parseInt(new Date().getTime()/1000 ),
				userid=uni.getStorageSync('userinfo').userId,
				token=uni.getStorageSync('userinfo').access_token
			this.$ajax('skTransfer/createEntrust',{
				money:this.nums,
				count:this.number,
				secret:md5(md5(this.apikey+time+this.nums)+userid+token+md5(payPassword)),
				type:this.colorIndex==0?1:2
			},"POST").then(res => {
				this.$sToast('交易成功')
				this.getEntrusInfo()
			});
		},
		// 撤单
		cancleEntrust(payPassword){
			let time=parseInt(new Date().getTime()/1000 ),
				userid=uni.getStorageSync('userinfo').userId,
				token=uni.getStorageSync('userinfo').access_token
			this.$ajax('skTransfer/cancleEntrust',{
				money:this.money,
				id:this.id,
				secret:md5(md5(this.apikey+time+this.money)+userid+token+md5(payPassword))
			},"POST").then(res => {
				this.id=''
				this.$sToast('撤单成功')
				this.getEntrusInfo()
			});
		},
		getEntrusInfo(payPassword){
			this.$ajax('bi/getEntrusInfo',{
				userId:uni.getStorageSync('userinfo').userId,
				type:this.colorIndex==0?1:2
			},"POST").then(res => {
				this.EntrusInfo=res.data
				this.nums=res.data.biCoin.exchange.toFixed(2)
			});
		},
		jian() {
			if (this.nums > 1) {
				this.nums--;
			}
		},
		jia() {
			this.nums++;
		},
		jian1() {
			if (this.number > 1) {
				this.number--;
			}
		},
		jia1() {
			this.number++;
		},
		perSelet(index){
			this.itemIndex=index
		},
		colorChange(){
			this.colorIndex==0?this.colorIndex=1:this.colorIndex=0
			this.getEntrusInfo()
			if(this.colorIndex==0){
				this.sell_box='buy_color'
			}
			if(this.colorIndex==1){
				this.sell_box='sell_color'
			}
		}
	}
};
</script>

<style>
.head {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 21rpx 0 24rpx 0;
	border-bottom: 1rpx solid #e0e0e0;
	margin: 0 30rpx;
}

.aside_left {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 401rpx;
	padding-left: 10rpx;
}

.aside_right {
	display: flex;
	flex: 1;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
}

.coin {
	margin: 0 14rpx 0 18rpx;
	font-size: 30rpx;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
}

.detile1 {
	width: 38rpx;
	height: 32rpx;
}

.b_down_arr {
	width: 22rpx;
	height: 14rpx;
}

.set_green {
	font-size: 30rpx;
	line-height: 30rpx;
	color: rgba(77, 184, 114, 1);
}

.set_gray {
	font-size: 30rpx;
	line-height: 30rpx;
	color: rgba(153, 153, 153, 1);
}

.sellOrbuy_box {
	display: flex;
	flex-direction: row;
}

.aside_left1 {
	margin: 25rpx 31rpx 0 30rpx;
	width: 370rpx;
}

.aside_right1 {
	display: flex;
	flex-direction: row;
	padding-top: 30rpx;
}

.down_arr {
	width: 22rpx;
	height: 14rpx;
	margin-left: 22rpx;
}

.exchange {
	width: 24rpx;
	height: 23rpx;
}

.change_btn {
	display: flex;
	flex-direction: row;
}

.btn {
	width: 185rpx;
	height: 52rpx;
	background: rgba(243, 243, 245, 1);
	line-height: 52rpx;
	text-align: center;
}
.common_box {
	width: 370rpx;
	height: 68rpx;
	background:rgba(77,184,114,1);
	border-radius: 4rpx;
	font-size: 28rpx;
	line-height: 68rpx;
	color: rgba(255, 255, 255, 1);
	text-align: center;
	margin-top: 39rpx;
}
.buy_btn {
	border-radius: 4rpx 0rpx 0rpx 4rpx;
	color: #4db872;
}
.buy_color{
	background:rgba(77,184,114,1);
	color: #ffffff;
}
.sell_btn {
	border-radius: 0rpx 4rpx 4rpx 0rpx;
	color: #FF3543;	
}
.sell_color{
	background:rgba(255,53,67,1);
	color: #FFFFFF;
}
.set_margin {
	margin: 30rpx 0 25rpx 10rpx;
}

.about_nub {
	font-size: 24rpx;
	line-height: 24rpx;
	color: rgba(153, 153, 153, 1);
	margin: 15rpx 0 19rpx 1rpx;
}

.choose_percentage {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-top: 15rpx;
}

.coin_name {
	margin: 0 31rpx 0 15rpx;
}

.percentage {
	width: 85rpx;
	height: 46rpx;
	background: rgba(243, 243, 245, 1);
	border-radius: 4rpx;
	color: #999999;
	text-align: center;
	line-height: 46rpx;
}

.append_nub {
	display: flex;
	flex-direction: row;
	line-height: 24rpx;
	margin-top: 40rpx;
	justify-content: space-between;
}

.set_flex {
	display: flex;
	flex-direction: row;
}

.buy_number {
	margin-left: 21rpx;
}



.price_box {
	margin-right: 65rpx;
}

.price_red {
	font-size: 24rpx;
	color: rgba(255, 53, 67, 1);
	line-height: 44rpx;
}

.price_red_box {
	margin-bottom: 18rpx;
}

.price_green {
	font-size: 24rpx;
	color: rgba(77, 184, 114, 1);
	line-height: 44rpx;
}

.title {
	line-height: 22rpx;
	margin-bottom: 15rpx;
}

.mumber_box {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.mumber {
	font-size: 24rpx;
	color: rgba(102, 102, 102, 1);
	line-height: 44rpx;
}

.entrust_box {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border-bottom: 1rpx solid #e0e0e0;
	padding: 50rpx 30rpx 30rpx 30rpx;
}

.cancel_btn {
	width: 90rpx;
	height: 50rpx;
	background: rgba(255, 255, 255, 1);
	border: 1rpx solid rgba(224, 224, 224, 1);
	border-radius: 25rpx;
	color: #0297fe;
	text-align: center;
	line-height: 50rpx;
}

.sell_tab {
	width: 36rpx;
	height: 36rpx;
	background: #ff3543;
	border-radius: 8rpx;
	color: #ffffff;
	line-height: 36rpx;
	text-align: center;
	font-size: 22rpx;
}

.entrust {
	font-size: 30rpx;
	color: rgba(51, 51, 51, 1);
}

.buy_tab {
	width: 36rpx;
	height: 36rpx;
	background: rgba(77, 184, 114, 1);
	border-radius: 8rpx;
	color: #ffffff;
	line-height: 36rpx;
	text-align: center;
	font-size: 22rpx;
}

.record_box {
	width: 690rpx;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(2, 151, 254, 0.1);
	border-radius: 12rpx;
	margin: 30rpx 30rpx 0 30rpx;
	padding: 20rpx 20rpx 28rpx 20rpx;
}

.trade_record {
	font-size: 26rpx;
	color: rgba(153, 153, 153, 1);
	display: flex;
	align-items: center;
}

.record {
	width: 28rpx;
	height: 24rpx;
	margin-right: 15rpx;
}

.aside_top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 28rpx;
}

.aside_bot {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 10rpx 0;
}

.left_content {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.entrust_number,
.entrust_price {
	display: flex;
	flex-direction: row;
	width: 356rpx;
}

.blod {
	font-size: 32rpx;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
}

.m_right {
	margin-right: 11rpx;
}
.shu {
	margin: 0 10rpx;
}
.jiajian {
	width: 370rpx;
	height: 66rpx;
	border: 1rpx solid #cccccc;
	border-radius: 5rpx;
}
.jia {
	width: 70rpx;
	height: 66rpx;
}

.jiajiana {
	width: 226rpx;
	height: 66rpx;
	border-left: 1rpx solid #cccccc;
	border-right: 1rpx solid #cccccc;
}
.flexs4 {
	display: flex;
	flex-direction: row;
	text-align: center;
}
.reduce_sign{
	width: 22rpx;
	height: 4rpx;
}
.add_sign{
	width: 22rpx;
	height: 22rpx;
}
.flexs {
 display: flex;
 justify-content: center;
 align-items: center;
}
.active{
	color: #0297FE;
	background-color: #D2EDFF;
}
.have_no{
	font-size:30rpx;
	color:rgba(153,153,153,1);
	text-align: center;
	margin: 120rpx 0 290rpx 0;
}
</style>
